import React from "react";
import { NavLink } from "react-router-dom";

import { classNameFn } from "./utils";

type Props = {
  to: string;
  title?: string;
  caption: string;
  disabled?: boolean;
};

const NavbarItem = ({ to, caption, title, disabled = false }: Props) => {
  const onClick = (event: React.MouseEvent) => {
    if (disabled) {
      event.preventDefault();
    }
  };

  return (
    <NavLink
      to={to}
      onClick={onClick}
      {...(title && { title })}
      className={classNameFn(disabled)}
    >
      {caption}
    </NavLink>
  );
};

export default NavbarItem;
